<template>
  <div class="dashboard-panel-detail">
    <div class="pages-box">
      <div class="pages-left-child" :class="{ 'pages-left-close': !leftClose }">
        <!-- <div class="flot-btn hw-click-cursor hw-flex-style-c-c" @click="leftClose = !leftClose">
          <t-icon name="caret-left-small" v-if="leftClose" />
          <t-icon name="caret-right-small" v-else />
        </div> -->
        <div class="page-heard hw-flex-style-b-c">
          <span class="heard-title">基础设置</span>
        </div>
        <div class="pages-left-content">
          <div class="card-item-parent" v-for="(item, index) in leftListAdmin" :key="index">
            <div
              @click="clickGroup(item.id, item.title)"
              class="card-item hw-flex-style-c-c hw-click-cursor"
              :class="{ 'chang-item-active': item.id == cruuent }"
            >
              <div class="card-item-left">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="page-heards"></div>
        <div class="page-heard hw-flex-style-b-c">
          <span class="heard-title">展览情况</span>
        </div>
        <div class="pages-left-content">
          <div class="card-item-parent" v-for="(item, index) in leftListAdmin1" :key="index">
            <div
              @click="clickGroup(item.id, item.title)"
              class="card-item hw-flex-style-c-c hw-click-cursor"
              :class="{ 'chang-item-active': item.id == cruuent }"
            >
              <div class="card-item-left">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ages-right-child" :class="{ 'ages-right-child-null': cruuent == 2 }">
        <t-card class="dashboard-detail-card" :title="title" :bordered="false">
          <div class="dashboard-detail-card-body">
            <div class="title-box" v-if="title">
              <span>{{ title }}</span>
              <div class="title-box-right" v-if="cruuent === 4">
                <seachInput @onEnterValue="onEnterValue" />
              </div>
            </div>
            <div class="dashboard-detail-card-body-content">
              <component
                :is="componetsItem"
                :threes="threes"
                :info="info"
                :seach="value"
                :role="store.projectRole"
                @updateInfo="updateInfo"
              />
            </div>
          </div>
        </t-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import seachInput from '@/components/seach/seach.vue';
import { projectTemplate } from '@/api/templates/templates';
import { useProjectStore } from '@/store';
import { treeList } from '@/api/user/user';
import adminItem1 from './components/adminComponents/adminItem1.vue';
import adminItem2 from './components/adminComponents/adminItem2.vue';
import adminItem3 from './components/adminComponents/adminItem3.vue';
import adminItem4 from './components/adminComponents/adminItem4.vue';
import adminItem5 from './components/adminComponents/adminItem5.vue';
import adminItem6 from './components/adminComponents/adminItem6.vue';
import unitTable from './components/memberTable.vue';
import invite from '../../company/components/Invite.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useRoute } from 'vue-router';
import { urls } from '@/utils/request/upload';
import { reactive, ref, computed } from 'vue';
import { leftListAdmin, leftListAdmin1 } from './components/data';
import { number } from 'echarts/core';

const visible1 = ref(false);
const loading = ref(false);
const title = ref('展览信息');
const info = ref({});
const value = ref('');
const listMembers = ref([]);
const threes = ref([]);
const cruuent = ref(1);
const name = ref('');
const leftClose = ref(true);
const gorupInfo = reactive({
  name: '',
  id: 0,
  sort: null,
});
const route = useRoute();
const store = useProjectStore();
if (route.query.type) {
  cruuent.value = Number(route.query.type);
  title.value = '展览动态';
}
if (route.query.modeType) {
  cruuent.value = 6;
  title.value = '展品标签';
}
const props = defineProps({
  authenticationId: {
    type: Number,
  },
  inviteIds: {
    type: Number,
  },
});

const componetsItem = computed(() => {
  let item;
  switch (cruuent.value) {
    case 1:
      return adminItem1;
      break;
    case 2:
      return adminItem2;
      break;
    case 3:
      return adminItem3;
      break;
    case 4:
      return adminItem4;
      break;
    case 5:
      return adminItem5;
      break;
    case 6:
      return adminItem6;
      break;
  }
});
const init = async () => {
  try {
  } catch {}
};
const updateInfo = (e, types) => {
  info.value = e;
  if (types) {
    init();
  }
};
const onEnterValue = (e: string) => {
  //输入框搜索
  // console.log(e);
  value.value = e;
};
const getThree = async () => {
  try {
    let res = await treeList(373730606104645);
    threes.value = res.data;
  } catch {}
};
const clickGroup = (e: number, str: string) => {
  cruuent.value = e;
  title.value = str == '互动情况' ? '' : str;
};
init();
getThree();
</script>

<style lang="less" scoped>
@import '../../company/index.less';
.dashboard-panel-detail {
  height: 100%;
}
.page-heard {
  height: 64px;
  padding: 16px 24px;
  box-shadow: none;
  .heard-title {
    height: 28px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
  }
}
.pages-left-content {
  padding-top: 0;
  padding-bottom: 0;
  padding: 0px;
}
.page-heards {
  width: 236px;
  height: 16px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin: 0 auto;
}
:deep(.t-card__body) {
  height: 100%;
}
.heard-title {
  font-size: 18px;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #37372f;
  line-height: 24px;
}
.pages-box {
  width: 100%;
  height: 100%;
}
.pages-left-child {
  max-height: 100%;
  height: 100%;
  width: 284px;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
}
.ages-right-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  margin-right: 0;
  overflow: hidden;
  border: none;
  :deep(.t-card) {
    height: 100%;
  }
  :deep(.t-card__header) {
    display: none;
    // height: 100%;
  }
  // overflow: scroll;
}
.ages-right-child-null {
  background: transparent;
  border-radius: 6px;
  // border: 1px solid transparent;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.ages-right-child-null::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.dashboard-detail-card {
  width: 100%;
  height: 100%;
}
.dashboard-detail-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 24px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    padding-top: 0px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
    .title-box-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .dashboard-detail-card-body-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }
}
.dashboard-detail-card-body-content::-webkit-scrollbar {
  display: none;
}
:deep(.t-card__body) {
  padding: 0;
  height: calc(100% - 0px);
}
:deep(.t-card) {
  border-radius: 4px;
}
.card-item-parent {
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
}
.card-item {
  display: flex;
  align-items: center;
  padding: 0px 48px;
  padding-right: 24px;
  width: 100%;
  height: 36px;
  border-radius: 0px;

  .card-item-left {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  .item-num {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
  }
}
.card-item:hover {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active:hover {
  background: #ffece6;
}
</style>
